<template>
  <view class="con">
    <!-- 头部 -->
    <view class="topWrap">
      <view :style="{marginTop: systemBarHeight + 'px'}"></view>
      <view class="topssss">
        <image class="topssss_img" @click="fanuiBtn" mode="widthFix" src="/static/index/img29.png"></image>
        <view>我的回单</view>
      </view>
      <!-- tab -->
      <view class="tanba flex">
        <view class="tanbali" :class="ed===1?'active':''" @click="changTab(1)">待回单<text v-if="Number(daiHunDanNum)>0">{{daiHunDanNum}}</text></view>
        <view class="tanbali" :class="ed===2?'active':''" @click="changTab(2)">已回单</view>
      </view>
      <view class="hhhh"></view>
    </view>
    <!-- 下面列表 -->
    <view class="liebiao">
      <view class="liebiao_li flex flex_between" v-for="(item,index) in huiList" :key="index" @click="goHuiDanDe(item)">
        <view class="liebiao_liz">
          <view>
            <view class="liebiao_liz2">{{item.title}}</view>
             <view class="huidan">
               <view class="huidan_v1">互单：{{item.add_time}}</view>
               <view class="huidan_v2">回单：<text v-if="ed===1">{{item.hui_will}}</text><text v-if="ed===2">{{item.hui_ed}}</text></view>
             </view>
          </view>
           <view class="liebiao_liz1 flex">
              <image class="liebiao_liz1z" mode="widthFix" :src="item.head"></image>
              <view class="liebiao_liz1y">{{item.nikename}}</view>
           </view>
         </view>
         <view class="xiam_1y">
           <image class="xiam_1y_img" mode="widthFix" :src="item.pic"></image>
         </view>
        <!-- <image class="liebiao_liy" mode="aspectFill" :src="item.pic"></image> -->
      </view>
    </view>
  </view>
</template>

<script>
  import {
    xianxianMyHui //我的回单
  } from '@/request/api.js'
  export default {
    data() {
      return {
        openid: uni.getStorageSync('openid'), //获取缓存的openid
        // openid: 'oycWz5dVMvQzmqaK95yAw6H0Pc_Q',
        systemBarHeight: 0,
        page: 1, //页码
        total: 0, //总共的数量
        pagesizes: 15, //每页数量
        ed:1,//1待互单、2已互单
        huiList:[],//互单列表
        daiHunDanNum:0 //待回单的数量
      };
    },
    onReachBottom() {
      let totolPage =Math.ceil(this.total / this.pagesizes) 
      console.log('总共多少页')
      console.log(totolPage)
      if(this.page<=totolPage){
        this.loadMore(); // 当上拉时加载更多数据
      }
    },
    onLoad() {
      this.getStatusBarHeight();
      
    },
    onShow() {
      this.page = 1
      this.huiList = []
      this.getXianMyHuiListFun();//获取列表
    },
    methods: {
      getStatusBarHeight() {
        uni.getSystemInfo({
            success: res => {
              console.log(res.statusBarHeight)
              this.systemBarHeight = res.statusBarHeight;
              console.log('是多少')
              console.log(this.systemBarHeight)
              const systemInfo = uni.getSystemInfoSync()
              if (systemInfo.osName === 'ios'){
                console.log('是苹果机')
              }
              if (systemInfo.osName === 'android'){
                console.log('是安卓机')
                this.systemBarHeight = res.statusBarHeight + 4;
              }
            }
          });
      },
      // 切换头部
      changTab(ed){
        this.page = 1
        this.ed = ed
        this.huiList = []
        this.getXianMyHuiListFun()
      },
      // 加载更多
      loadMore(){
        this.page = this.page+1
        this.getXianMyHuiListFun()
      },
      getXianMyHuiListFun(){
        let that = this
        let param = {
          openid:this.openid,
          page:this.page,
          ed:this.ed
        }
        xianxianMyHui(param).then(res=>{
          if(this.ed===1){
            this.daiHunDanNum =Number(res.data.total);
          }
          this.total = Number(res.data.total);
          this.pagesizes = Number(res.data.pagesizes);
          let listRe = res.data.arrList
          if(listRe.length>0){
            that.huiList = that.huiList.concat(listRe);
          }
        })
      },
      // 点击进入"我的回单"
      goHuiDanDe(info){
        uni.navigateTo({
          url:'/packageA/index/woDeHuiDanDe?info='+JSON.stringify(info)
        });
      },
      fanuiBtn(){
        uni.navigateBack({
          delta: 1
        });
      },
    }
  }
</script>

<style scoped lang="scss">
  page{
    padding: 0;
    margin: 0;
    background-color: rgba(238,238,238,1);
  }
  
  .con{
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
  }
  .topWrap{
    width: 100%;
    height: auto;
    background: linear-gradient(180deg, rgba(249,191,65,1) 0%,rgba(238,238,238,1) 100%);
    color: rgba(16,16,16,1);
    padding: 20rpx;
    box-sizing: border-box;
    .top{
      width: 100%;
      height: auto;
      .topz{
        width:440rpx;
        height: 80rpx;
        border-radius: 100rpx;
        background-color: rgba(255,246,228,1);
        color: rgba(136,136,136,1);
        font-size: 28rpx;
        padding: 0 34rpx;
        box-sizing: border-box;
        .topz_ipu{
          color: #F9BF41;
        }
        .topz_img{
          width: 48rpx;
          height: auto;
        }
      }
      .topy{
        width: 242rpx;
        height: 80rpx;
        border-radius: 100rpx;
        background-color: rgba(255,246,228,1);
        justify-content: center;
        .topyimg{
          width: 38rpx;
          height: auto;
        }
        .topy_t{
          color: rgba(249,191,65,1);
          font-size: 28rpx;
          font-weight: bold;
          margin-left: 10rpx;
        }
      }
    }
    .top2{
      background-color: rgba(255,255,255,1);
      width: 100%;
      height: auto;
      border-radius: 20rpx;
      margin-top: 50rpx;
      padding: 30rpx 50rpx;
      box-sizing: border-box;
      .top2li{
        width: 190rpx;
        height: 90rpx;
        border-radius: 100rpx;
        background: linear-gradient(180deg, rgba(253,230,179,1) 0%,rgba(255,246,246,0) 100%);
        text-align: center;
        line-height: 90rpx;
        color: rgba(16,16,16,1);
        font-size: 28rpx;
        font-weight: bold;
        position: relative;
        .top2lic_te{
          position: absolute;
          width: 48rpx;
          height: 24rpx;
          border-radius: 100rpx;
          background-color: rgba(216,30,6,1);
          text-align: center;
          line-height: 24rpx;
          top:0;
          right: 0;
          color: rgba(255,255,255,1);
          font-size: 24rpx;
        }
      }
    }
    .top3{
      width: 100%;
      padding: 0 10rpx;
      box-sizing: border-box;
      height: auto;
      margin-top: 54rpx;
      margin-bottom: 42rpx;
      word-break: break-all;
      text{
        word-break: break-all;
      }
      .top3_t1{
        color: #D81E06;
        font-weight: bold;
        margin-right: 15rpx;
        font-size: 24rpx;
      }
      .top3_t2{
        font-size: 24rpx;
      }
    }
  }
  .guanc{
    width: 100%;
    height: auto;
    padding: 0 20rpx;
    box-sizing: border-box;
    .guancT{
      margin: 0 30rpx;
      color: rgba(0,0,0,1);
      font-size: 36rpx;
      margin-bottom: 30rpx;
    }
    .guancC{
      width: 100%;
      height: auto;
      .guancCli{
        width: 100%;
        height: auto;
        height: 80px;
        padding: 30rpx;
        border-radius: 20rpx;
        background-color: rgba(255,255,255,1);
        color: rgba(16,16,16,1);
        font-size: 28rpx;
        box-sizing: border-box;
        margin-bottom: 20rpx;
      }
      .guancCliz{
        width: 40%;
        .guancCliz_img{
          width: 80rpx;
          height: 80rpx;
          border-radius: 100%;
          margin-right: 20rpx;
        }
        .guancCliz_v1{
          line-height: 40rpx;
          color: rgba(16,16,16,1);
          font-size: 28rpx;
        }
        .guancCliz_v2{
          color: rgba(16,16,16,1);
          font-size: 24rpx;
          line-height: 34rpx;
        }
      }
    }
    .guancCliz_y{
      width: 400rpx;
      justify-content: flex-end;
      margin-right: -40rpx;
      // background: #f00;
      .guancCliz_y1{
        width: 160rpx;
        height: 80rpx;
        border-radius: 100rpx 0px 0px 100rpx;
        background: linear-gradient(180deg, rgba(0,0,0,1) 0%,rgba(255,246,228,1) 100%);
        text-indent: 20rpx;
        color: rgba(249,191,65,1);
        font-size: 28rpx;
        line-height: 80rpx;
        font-style: italic;
      }
      .guancCliz_y2{
        width: 230rpx;
        height: 80rpx;
        border-radius: 100rpx;
        background: linear-gradient(180deg, rgba(249,191,65,1) 0%,rgba(255,246,228,1) 100%);
        font-size: 28rpx;
        line-height: 62rpx;
        position:relative;
        z-index: 1;
        left: -50rpx;
        text-align: center;
        color: rgba(0,0,0,1);
        font-size: 24rpx;
        font-weight: bold;
        font-style: italic;
        text{
          color: rgba(216,30,6,1);
          font-size: 48rpx;
          
        }
      }
    }
    
  }
input::placeholder{
    color: #F9BF41;
  }
  .shim{
    width: 100%;
    height: auto;
    justify-content: space-around;
    .shim1{
      width: 212rpx;
      height: 90rpx;
      line-height: 90rpx;
      border-radius: 100rpx;
      background: linear-gradient(180deg, rgba(253,230,179,1) 0%,rgba(255,246,246,0) 100%);
      color: rgba(16,16,16,1);
      font-size: 28rpx;
      text-align: center;
    }
    .shim2_img{
      width: 160rpx;
      height: 160rpx;
      border-radius: 100rpx;
    }
  }
  .shimb{
    color: rgba(16,16,16,1);
    font-size: 28rpx;
    width: 100%;
    text-align: center;
    margin-bottom: 34rpx;
    text{
      margin-left: 16rpx;
    }
  }
  .kianh{
    width: 100%;
    height: auto;
    .guancCliz_y{
      width: 400rpx;
      justify-content: flex-end;
      margin-right: -40rpx;
      // background: #f00;
      .guancCliz_y1{
        width: 150rpx;
        height: 60rpx;
        border-radius: 100rpx 0px 0px 100rpx;
        background: linear-gradient(180deg, rgba(0,0,0,1) 0%,rgba(255,246,228,1) 100%);
        text-indent: 20rpx;
        color: rgba(249,191,65,1);
        font-size: 28rpx;
        line-height: 60rpx;
        font-style: italic;
      }
      .guancCliz_y2{
        width: 210rpx;
        height: 60rpx;
        border-radius: 100rpx;
        background: linear-gradient(180deg, rgba(249,191,65,1) 0%,rgba(255,246,228,1) 100%);
        font-size: 28rpx;
        line-height: 43rpx;
        position:relative;
        z-index: 1;
        left: -50rpx;
        text-align: center;
        color: rgba(0,0,0,1);
        font-size: 24rpx;
        font-weight: bold;
        font-style: italic;
        text{
          color: rgba(216,30,6,1);
          font-size: 48rpx;
          
        }
      }
    }
  }
  .woLid{
    width: 100%;
    height: auto;
    margin-top: 70rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
    .woLidT{
      width: 100%;
      padding: 0 20rpx;
      box-sizing: border-box;
      margin-bottom: 10rpx;
      .woLidTz{
        color: rgba(0,0,0,1);
        font-size: 36rpx;
      }
      .woLidTy{
        width: 212rpx;
        height: 90rpx;
        border-radius: 100rpx;
        background: linear-gradient(180deg, rgba(253,230,179,1) 0%,rgba(255,246,246,0) 100%);
        line-height: 90rpx;
        text-align: center;
        color: rgba(16,16,16,1);
        font-size: 14px;
      }
    }
  }
  .luit{
    width: 100%;
    height: auto;
    padding-bottom: 20rpx;
    .luitli{
      width: 100%;
      height: auto;
      padding: 30rpx;
      box-sizing: border-box;
      border-radius: 20rpx;
      background-color: rgba(255,255,255,1);
      margin-bottom: 20rpx;
      .luitliz{
        width: 180rpx;
        height: 180rpx;
        border-radius: 20rpx;
        margin-right: 32rpx;
        flex-shrink: 0;
      }
      .luitliy{
        width: 440rpx;
        height: 180rpx;
        // background: #f00;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .luitliy_v1{
          width: 100%;
          color: rgba(16,16,16,1);
          font-size: 28rpx;
          line-height: 40rpx;
        }
        .luitliy_v2{
          font-size: 28rpx;
          line-height: 40rpx;
          color: rgba(16,16,16,1);
        }
      }
      .luitliy_v3{
        .luitliy_v3_y_img{
          width: 40rpx;
          height: auto;
          margin-left: 28rpx;
        }
      }
      .luitliy_v3xxx{
        margin-left: -30rpx;
      }
    }
  }
  .tanba{
    width: 100%;
    justify-content: center;
    .tanbali{
      width: 260rpx;
      height: 90rpx;
      border-radius: 100rpx;
      background: linear-gradient(180deg, rgba(253,230,179,1) 0%,rgba(255,246,246,0) 100%);
      line-height: 90rpx;
      color: rgba(16,16,16,1);
      font-size: 28rpx;
      text-align: center;
      margin: 0 22rpx;
      position: relative;
      text{
        min-width: 48rpx;
        height: 24rpx;
        border-radius: 100rpx;
        background-color: rgba(216,30,6,1);
        display: inline-block;
        position: absolute;
        top:0;
        right: 0;
        color: rgba(255,255,255,1);
        font-size: 24rpx;
        line-height: 24rpx;
      }
    }
    .tanbali.active{
      background: linear-gradient(180deg, rgba(249,172,65,1) 0%,rgba(255,246,246,0) 100%);
    }
    .tanbali2{
      width: 260rpx;
      height: 90rpx;
      border-radius: 100rpx;
      
      line-height: 90rpx;
      color: rgba(16,16,16,1);
      font-size: 28rpx;
      text-align: center;
      margin: 0 22rpx;
    }
  }
  .hhhh{
    width: 100%;
    height: 30rpx;
  }
  .liebiao{
    width: 100%;
    height: auto;
    padding: 20rpx;
    box-sizing: border-box;
    .liebiao_li{
      width: 100%;
      height: auto;
      padding: 30rpx;
      box-sizing: border-box;
      border-radius: 20rpx;
      background-color: rgba(255,255,255,1);
      margin-bottom: 20rpx;
      .liebiao_liz{
        display: flex;
        flex-direction: column;
        height: 200rpx;
        width: 400rpx;
        justify-content: space-between;
        .liebiao_liz1{
          width: 100%;
          height: auto;
          .liebiao_liz1z{
            width: 36rpx;
            height: 36rpx;
            border-radius: 100%;
            margin-right: 16rpx;
          }
          .liebiao_liz1y{
            color: rgba(16,16,16,1);
            font-size: 24rpx;
          }
        }
        .liebiao_liz2{
          color: rgba(16,16,16,1);
          font-size: 24rpx;
          line-height: 28rpx;
          font-weight: bold;
          margin-bottom: 10rpx;
        }
      }
      .huidan{
        width: 100%;
        height: auto;
        .huidan_v1{
          line-height: 34rpx;
          color: rgba(16,16,16,1);
          font-size: 24rpx;
        }
        .huidan_v2{
          line-height: 34rpx;
          font-size: 24rpx;
          text{
            color: rgba(216,30,6,1);
          }
        }
      }
    }
    .liebiao_liy{
      width: 200rpx;
      height: 200rpx;
    }
    .xiam_1y {
      width: 200rpx;
      height: 200rpx;
      border-radius: 20rpx;
      overflow: hidden;
      
      .xiam_1y_img {
        width: 200rpx;
        height: 200rpx;
      }
    }
  }
</style>